<template>
  <!-- 头部 -->
  <div class="top" :style="{'background-image':'url('+ seller.bgImg +')'}">
    <div class="header">
      <div class="hleft">
        <img :src="seller.avatar" alt="" />
      </div>
      <div class="hright">
        <div class="brand">
          <span class="leftbr"></span>
          <div class="store">{{seller.name}}</div>
        </div>
        <div class="htip">{{ seller.description}}/{{ seller.deliveryTime}}分钟送达</div>
        <div class="discount">
          <span class="dimg"></span>
          <div class="disprice">在线支付满28减5,满50减10</div>
        </div>
      </div>

      
      <div class="hmore" @click="show = true">5个 ></div>
      <van-overlay :show="show" @click="show = false" z-index="5">
          <popPage></popPage>
      </van-overlay>
    </div>
    <div class="notice">
      <span class="nimg"></span>
      <div class="ndetail">
        粥品香坊其烹饪粥料的秘方源于中国千年古法，再融和现代制作工艺
      </div>
      <span class="ndetail">></span>
    </div>
    
    <ul class="contop">
      <li :class='{active:pageType === 1?true:false}' 
      @click="toggle(1)">商品</li>
      <li :class='{active:pageType === 2?true:false}' 
      @click="toggle(2)">评价</li>
      <li :class='{active:pageType === 3?true:false}' 
       @click="toggle(3)">商家</li>
    </ul>
  </div>
</template>

<script>
import {mapActions,mapState} from 'vuex';
import popPage from "../popPage/popPage.vue";
export default {
  name: "shopHeader",
  props: {
    pageType:{
    default:1,
  }},
  components: {
    popPage,
  },

  data() {
    return {
      name:"",
      show: false,
    };
  },
  computed:{
    ...mapState(['seller'])
  },
  methods:{
    ...mapActions(["getSeller"]),
    toggle(num){
      switch(num){
        case 1:
          this.$router.push('/goods');
          break;
          case 2:
          this.$router.push('/comment');
          break;
          case 3:
          this.$router.push('/seller');
          break;
      }
      
    }
  },
  async mounted(){
     await this.getSeller()
  }
 
};
</script>

<style scoped>
.top {
  position: relative;
  /* height: 260rem; */
  background-color: rgba(7, 17, 27, 0.5);
}
.top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/images/brand.jpg);
  /* background-size: cover; */
  filter: blur(10rem);
  z-index: -1;
}
.header {
  position: relative;
  display: flex;
}
.hleft {
  margin: 48rem 32rem 36rem 48rem;
}
.hleft img {
  width: 128rem;
  height: 128rem;
  border-radius: 4rem;
}
.hright {
  margin: 52rem 0 40rem 0;
}
.hright .brand {
  display: flex;
  font-size: 32rem;
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 36rem;
  height: 36rem;
}
.brand .leftbr {
  width: 60rem;
  height: 34rem;
  margin-right: 12rem;
  background: url(/images/brand@3x.png) no-repeat;
  background-size: cover;
}
.hright .htip {
  margin: 16rem 0 20rem 0;
  font-size: 24rem;
  color: rgb(255, 255, 255);
  font-weight: 200;
  height: 24rem;
  line-height: 24rem;
}
.hright .discount {
  display: flex;
}
.dimg {
  width: 25rem;
  height: 25rem;
  margin-right: 12rem;
  background: url(/images/decrease_1@3x.png) no-repeat;
  background-size: cover;
}
.disprice {
  font-size: 20rem;
  color: rgb(255, 255, 255);
  font-weight: 200;
  height: 24rem;
  line-height: 24rem;
}
.header .hmore {
  position: absolute;
  right: 24rem;
  bottom: 30rem;
  font: size 20rem;
  padding: 14rem 16rem;
  color: rgb(255, 255, 255);
  font-weight: 200;
  line-height: 24rem;
  border-radius: 24rem;
  background-color: rgba(0, 0, 0, 0.2);
}
.notice {
  display: flex;
  align-items: center;
  padding: 0 24rem;
  height: 56rem;
  background-color: rgba(7, 17, 27, 0.2);
}
.notice .nimg {
  width: 45rem;
  height: 25rem;
  margin-right: 12rem;
  background: url(/images/bulletin@3x.png) no-repeat;
  background-size: cover;
}
.notice .ndetail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20rem;
  color: rgb(255, 255, 255);
  font-weight: 200;
  line-height: 56rem;
}

.top .contop {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 80rem;
  font-size: 28rem;
  line-height: 28rem;
  background-color: #fff;
  color: rgb(77, 85, 93);
  border-bottom: 1rem solid rgb(7, 17, 27, 0.1);
}
.contop .active {
  color: rgb(240, 20, 20);
}
</style>